<template>
  <!--  <van-button type="primary" @click="doMatch">  </van-button>-->
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode"/>
    </template>
  </van-cell>

  <UserCardList :user-list="userList" :loading="loading"/>
  <div>
    <van-empty v-if="!userList || userList.length < 1" description="数据为空"/>
  </div>
</template>

<script setup lang="ts">
import {ref, watchEffect} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showFailToast, showSuccessToast} from "vant";
import UserCardList from "../components/UserCardList.vue";
import {UserType} from "../models/user";

const isMatchMode = ref<boolean>(false)

const userList = ref<UserType[]>([])
const loading = ref(true)

/**
 * 加载数据
 */
const loadData = async () => {
  loading.value = true;
  let userListData;
  try {
    if (isMatchMode.value) {
      const response = await myAxios.get('/user/match', {
        params: {
          num: 10,
        },
      });
      console.log('/user/match succeed', response);
      const data = response.data?.data;
      showSuccessToast(`匹配成功，共${data.length}个用户`);
      userListData = data;
    } else {
      const response = await myAxios.get('/user/recommend', {
        params: {
          pageSize: 8,
          pageNum: 1,
        },
      });
      console.log('/user/recommend succeed', response);
      userListData = response.data?.data?.records || [];
    }
  } catch (error) {
    console.log('请求失败', error);
    showFailToast('请求失败');
    userListData = undefined;
  }
  if (userListData) {
    userListData.forEach((user: UserType) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    });
    userList.value = userListData;
  }
  loading.value = false;
}

watchEffect(() => {
  loadData()
})
</script>

<style scoped>

</style>